<template>
  <div>
    {{ multipleSelection }}
    <section>
      <el-button type="primary" class="el-icon-plus" @click="addbotfun()">
        解除禁用</el-button
      >
      <el-button type="danger" class="el-icon-delete" @click="delsfun()"
        >禁用账户</el-button
      >
    </section>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="nickName" label="昵称">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="loginName" label="登录名"> </el-table-column>
      <el-table-column label="身份状态">
        <template slot-scope="scope">
          <span v-if="scope.row.lockedFlag == 0" class="gee">正常</span>
          <span v-else class="red">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="是否注销">
        <template slot-scope="scope">
          <span v-if="scope.row.isDeleted == 0" class="gee">正常</span>
          <span v-else class="red">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间"> </el-table-column>
    </el-table>
    <div class="jz">
      <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "red",
      tableData: [],
      multipleSelection: [],
      lockedFlag: "",
    };
  },
  mounted() {
    this.getfun(1);
  },
  methods: {
    handleCurrentChange(val) {
      this.getfun(val);
    },
    delsfun() {
      //禁用按钮
      this.eput();
      // this.getfun(1);
    },
    addbotfun() {
      //解除禁用
      this.deput();
      // this.getfun(1);
    },
    async deput() {
      //解除禁用
      let newArry = [];
      this.multipleSelection.map((item) => {
        newArry.push(item.userId);
        //  array.push(item.lockedFlag)
        //  arry.pop(item.lockedFlag)
        console.log(newArry);
      });
      let result = await this.$http.put("/users/0", {
        ids: newArry,
      });
      this.getfun(1);
    },
    async eput() {
      //禁用
      let newArry = [];
      this.multipleSelection.map((item) => {
        newArry.push(item.userId);
      });
      let result = await this.$http.put("/users/1", {
        ids: newArry,
      });
      console.log(this.multipleSelection);
      this.getfun(1)
    },
    async getfun(age) {
      //获取分页

      let result = await this.$http.get("/users", {
        params: {
          pageNumber: age,
          pageSize: 10,
          // lockStatus:0
        },
      });
      console.log(result);
      // this.totalCount = result.data.totalCount;
      this.tableData = result.data.list;
      // console.log(this.tableData);
      // this.carouselUrl = result.data.list.carouselUrl;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelection.map((item) => {
        this.lockedFlag = item.lockedFlag;
      });
      this.lockedFlag = val.lockedFlag;
      console.log(this.lockedFlag);
    },
  },
};
</script>

<style lang="less" scoped>
.red {
  color: red;
}
.gee {
  color: green;
}
.jz{
  text-align: center;
}
</style>